<template>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input
          v-model="queryInfo.key"
          placeholder="请输入内容"
          clearable
          @clear="pageManager(1, 10)"
        >
          <!-- 搜索框按钮 -->
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="pageManager(1, 10)"
          />
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button class="editButton" @click="addManagerMethrod"
          >添加管理员</el-button
        >
      </el-col>
    </el-row>

    <div style="margin-top: 15px">
      <el-table
        v-loading="loading"
        :data="pageData"
        fit
        highlight-current-row
        current-row-key
        stripe
        border
        style="width: 100%"
        :row-style="{ height: '80px' }"
      >
        <el-table-column type="index" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="管理员姓名" width="180">
        </el-table-column>
        <el-table-column prop="degree" label="文化程度"></el-table-column>
        <el-table-column prop="departmentVo.unit.name" label="所属单位"></el-table-column>
        <el-table-column prop="departmentVo.departmentName" label="所属部门"></el-table-column>
        <el-table-column prop="role" label="权限"></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope" >
            <el-button
              class="browserButton"
              icon="el-icon-setting"
              size="mini"
              @click="getManagerById(scope.row)"
              >编辑</el-button
            >
            <el-button
              class="editButton"
              icon="el-icon-delete"
              size="mini"
              @click="repassword(scope.row)"
              >重置密码</el-button
            >
            <el-button
              class="deleteButton"
              icon="el-icon-delete"
              size="mini"
              @click="removeManager(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="添加管理员"
      :visible.sync="addVisible"
      width="50%"
      :before-close="handleAddClose('addForm')"
    >
      <div>
        <el-form ref="addForm" :model="addManager" label-width="100px">
          <el-form-item label="管理员账号名">
            <el-input v-model="addManager.username"></el-input>
          </el-form-item>
          <el-form-item label="管理员手机号">
            <el-input v-model="addManager.phone"></el-input>
          </el-form-item>
          <el-form-item label="管理员密码">
            <el-input v-model="addManager.password"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="deleteButton" @click="addVisible = false">取 消</el-button>
        <el-button class="browserButton" @click="updateManagerInfoMethrod"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="修改管理员"
      :visible.sync="editVisible"
      width="50%"
      :before-close="handleEditClose"
    >
      <div>
        <el-form ref="addForm" :model="updateManagerInfo" label-width="100px">
          <el-form-item label="管理员姓名">
            <el-input v-model="updateManagerInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="管理员权限">
            <el-input v-model="updateManagerInfo.role"></el-input>
          </el-form-item>
          <el-form-item label="管理员文化程度">
            <el-input v-model="updateManagerInfo.degree"></el-input>
          </el-form-item>
          <el-form-item label="管理员性格">
            <el-input v-model="updateManagerInfo.sex"></el-input>
          </el-form-item>
          <el-form-item label="管理员描述">
            <el-input v-model="updateManagerInfo.description"></el-input>
          </el-form-item>
          <el-form-item label="管理员单位">
            <el-select
              :filterable="true"
              v-model="updateManagerInfo.unitId"
              placeholder="请选择所属单位"
            >
              <el-option
                v-for="(item, i) in allUnit"
                :label="item.name"
                :value="item.id"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="管理员部门">
            <el-select
              :filterable="true"
              v-model="updateManagerInfo.departmentId"
              placeholder="请选择所属单位"
            >
              <el-option
                v-for="(item, i) in allPart"
                :label="item.departmentName"
                :value="item.id"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="deleteButton" @click="editVisible = false">取 消</el-button>
        <el-button class="browserButton" @click="updateManagerById">确 定</el-button>
      </span>
    </el-dialog>

    <div class="block" style="margin-top: 15px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import {
  pageManager,
  getManagerById,
  register,
  deleteManagersById,
  updateManager,
} from "@/api/managers";
import { getAllUnit } from "@/api/unit";
import { getAllDepartment } from "@/api/department";

export default {
  data() {
    return {
      loading: true,
      addVisible: false,
      queryInfo: { key: null },
      pageData: [],
      total: 0,
      currentPage: 1,
      size: 10,
      addManager: {},
      ManagerById: null,
      updateManagerInfo: {
        id: null,
        name: "",
        role: "",
        degree: "",
        sex: "",
        description: "",
        unitId: null,
        departmentId: null,
      },
      editVisible: false,
      allUnit: null,
      allPart: null,
    };
  },
  created() {
    this.pageManager(this.currentPage, this.size);
    this.getAllUnit();
    this.getAllDepartment();
  },
  watch: {},
  methods: {
    pageManager(current, limit) {
      if (current < 1) {
        return;
      }
      if (this.queryInfo.key != null) {
        // console.log("aaaa");
        let name = this.queryInfo.key;
        pageManager(current, limit, name).then((res) => {
          this.pageData = res.data.list;
          this.total = res.data.count;
          if (res.data.list.length === 0)
            this.pageManager(--this.currentPage, this.size);
          this.loading = false;
        });
      } else {
        pageManager(current, limit).then((res) => {
          this.pageData = res.data.list;
          this.total = res.data.count;
          if (res.data.list.length === 0)
            this.pageManager(--this.currentPage, this.size);
          this.loading = false;
        });
      }
    },

    getAllUnit() {
      getAllUnit().then((res) => {
        this.allUnit = res.data.list;
      });
    },

    getAllDepartment() {
      getAllDepartment().then((res) => {
        this.allPart = res.data.list;
      });
    },

    getManagerById(row) {
      getManagerById(row.id).then((res) => {
        this.updateManagerInfo = res.data.manager;
        this.editVisible = true;
      });
    },

    repassword(row) {},

    removeManager(row) {
      this.$confirm("此操作将永久删除该管理员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteManagersById(row.id).then((res) => {
            this.pageManager(this.currentPage, this.size);
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    addManagerMethrod() {
      this.addManager = this.$options.data().addManager; // 重置data中的 某个form表单
      this.addVisible = true;
    },

    updateManagerById() {
      this.updateManagerNB(this.updateManagerInfo);
    },

    updateManagerNB({
      id,
      name,
      role,
      degree,
      sex,
      unitId,
      departmentId,
      description,
    }) {
      let postManager = {
        id,
        name,
        role,
        degree,
        sex,
        unitId,
        departmentId,
        description,
      };
      updateManager(postManager).then((res) => {
        this.pageManager(this.currentPage, this.size);
        this.editVisible = false;
      });
    },

    updateManagerInfoMethrod() {
      register(this.addManager).then((res) => {
        this.updateManagerInfo = res.data.manager;
        this.pageManager(this.currentPage, this.size);
        this.addVisible = false;
        this.editVisible = true;
      });
    },

    handleEditClose() {
      this.editVisible = false;
    },
    handleAddClose() {},

    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.pageManager(newPage, this.size);
    },

    handleSizeChange(newSize) {
      this.size = newSize;
      this.pageManager(this.currentPage, newSize);
    },
  },
};
</script>

<style>
</style>